/*
 * @Author: FengKongLi 
 * @Date: 2021-08-19 20:20:47 
 * @Last Modified by: FengKongLi
 * @Last Modified time: 2021-08-22 16:43:48
 */
//网站资讯--资讯信息页面
<template>
  <div>
    <!-- 查询 -->
    <div class="search">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item>
          <!--  <el-select
            clearable
            v-model="searchForm.status"
            placeholder="状态">
            <el-option v-for="item in tableData"
            :key="item.id"
              :label="item.status"
              :value="item.id"></el-option>
          </el-select> -->
          <el-select v-model="searchForm.status" placeholder="状态" clearable>
            <el-option label="未审核" value="未审核"></el-option>
            <el-option label="审核通过" value="审核通过"></el-option>
            <el-option label="审核不通过" value="审核不通过"></el-option>
            <el-option label="推荐" value="推荐"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            clearable
            v-model="searchForm.title"
            placeholder="标题"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            clearable
            v-model="searchForm.categoryId"
            placeholder="请选择栏目"
          >
            <el-option
              v-for="item in categoryData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toSearch">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 发布风采 -->
      <div class="publish-btn">
        <el-button @click="toPublishPage" type="primary">发布风采</el-button>
      </div>
    </div>
    <!-- 表格数据展示 -->
    <div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>

        <el-table-column label="封面" align="center" width="200">
          <template slot-scope="scope">
            <el-image
              style="width: 150px; height: 100px"
              :src="scope.row.cover"
              :preview-src-list="[scope.row.cover]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="风采" class="col">
          <template slot-scope="scope">
            <ul class="ul">
              <li>{{ scope.row.title }}</li>
              <li>
                {{ scope.row.baseUser ? scope.row.baseUser.realname : "" }}
              </li>
              <li>{{ scope.row.category ? scope.row.category.name : "" }}</li>
              <li>
                {{ moment(scope.row.publishTime).format("yyyy-MM-DD") }}
              </li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '未审核'" type="warning">{{
              scope.row.status
            }}</el-tag>
            <el-tag
              v-else-if="scope.row.status === '审核通过'"
              type="success"
              >{{ scope.row.status }}</el-tag
            >
            <el-tag v-else-if="scope.row.status === '审核不通过'" type="info">{{
              scope.row.status
            }}</el-tag>
            <el-tag v-else>{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="toRecom(scope.row.id)"
              >推荐</el-button
            >
            <el-button type="text" @click="toExam(scope.row)">审核</el-button>
            <el-button type="text" @click="toDelete(scope.row.id)"
              >删除</el-button
            >
          </template></el-table-column
        ></el-table
      >
    </div>
    <!-- 分页 -->
    <div class="page-div">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[5, 10, 15, 20, 30]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 审核的模态框 -->
    <div>
      <el-dialog
        title="审核风采信息"
        :visible.sync="examVisible"
        id=""
        th="60%"
      >
        <h3>{{ this.artTitle }}</h3>
        <div v-html="this.artContent"></div>
        <span slot="footer" class="dialog-footer">
          <el-button type="danger" @click="examNoPass">审核不通过</el-button>
          <el-button type="primary" @click="examPass">审核通过</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { findAll as queryCategory } from "@/api/infoCategory";
import {
  pageQuery as queryArticle,
  changeStatus,
  deleteById,
  saveOrUpdate,
} from "@/api/article";
import moment from "moment";
export default {
  data() {
    return {
      //表格数据
      tableData: {},
      //分页参数
      params: {
        page: 1,
        pageSize: 10,
      },
      //模糊搜索表单的数据
      searchForm: {
        title: "",
        status: "",
        categoryId: "",
      },
      // 栏目信息
      categoryData: {},
      // 总条数
      total: 0,
      // 资讯信息的内容数据
      art: {
        artID: "",
        artTitle: "",
        artContent: "",
      },
      //审核对话框的显示与隐藏
      examVisible: false,
    };
  },
  watch: {
    // 深度监听分页参数
    params: {
      handler() {
        this.queryTableData();
      },
      deep: true,
    },
  },
  created() {
    this.queryCategoryData();
    this.queryTableData();
  },
  methods: {
    // 获取栏目信息，为栏目搜索框选择信息获取数据
    async queryCategoryData() {
      let res = await queryCategory();
      // console.log(res.data);
      this.categoryData = res.data;
    },
    //分页查询资讯信息
    async queryTableData() {
      let temp = { ...this.params, ...this.searchForm };
      for (let key in temp) {
        if (!temp[key]) {
          delete temp[key];
        }
      }
      let res = await queryArticle(temp);
      // console.log(res.data.list);
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
    // 时间格式转换
    moment,
    //跳转到发布风采页
    toPublishPage() {
      this.$router.push({ path: "Publish" });
    },
    //每页显示的条数发生变化时的事件处理程序
    handleSizeChange(val) {
      this.params = {
        page: 1,
        pageSize: val,
      };
    },
    // 当前页码发生变化时的事件处理程序
    handleCurrentChange(val) {
      this.params.page = val;
    },

    //点击推荐按钮
    toRecom(id) {
      this.artID = id;
      this.$confirm("您确定要推荐此资讯吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await changeStatus({ id: this.artID, status: "推荐" });
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: "推荐成功",
            });
          }
          this.status = "推荐";
          this.queryTableData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消推荐",
          });
        });
    },
    //点击审核按钮
    toExam(row) {
      this.examVisible = true;
      this.artID = row.id;
      this.artTitle = row.title;
      this.artContent = row.content;
    },
    //点击审核对话框的 审核不通过 按钮
    async examNoPass() {
      let res = await changeStatus({ id: this.artID, status: "审核不通过" });
      if (res.status === 200) {
        this.$notify.error({
          title: "审核不通过",
          message: "审核不通过",
        });
      } else {
        return false;
      }
      this.queryTableData();
      this.examVisible = false;
    },
    //点击审核对话框的 审核通过 按钮
    async examPass() {
      let res = await changeStatus({ id: this.artID, status: "审核通过" });
      if (res.status === 200) {
        this.$notify({
          title: "审核通过",
          message: res.message,
          type: "success",
        });
      } else {
        return false;
      }
      this.queryTableData();
      this.examVisible = false;
    },
    //点击删除按钮
    toDelete(id) {
      this.artID = id;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await deleteById({ id: this.artID });
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: res.message,
            });
          }
          this.queryTableData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  .search-form {
    flex: 1;
  }
}

.col {
  width: calc(100% - 500px);
}
.ul {
  font-size: 12px;
  list-style: none;
}
.ul li:first-child {
  font-weight: 700;
}
</style>